<!DOCTYPE html>
<html lang="<%= I18n.locale %>">
<head>
  <title><%= page_title %></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <%= stylesheet_link_tag("hammy") %>
  <%= stylesheet_link_tag("tailwind", "data-turbo-track": "reload") %>
  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet" type="text/css">
  <%= yield :head %>
  <%= javascript_importmap_tags %>
</head>
<body data-turbo="true" class="bg-neutral-050 dark:bg-neutral-950">
  <div class="min-h-screen flex flex-col">
    <!-- Content -->
    <% if content_for?(:main) %>
      <%= yield :main %>
    <% else %>
      <main class="flex-1 w-full px-8 flex-col bg-neutral-050 dark:bg-neutral-950 text-neutral-950 dark:text-neutral-050 text-b2 items-center inline-flex">
        <div class="max-w-screen-xl w-full mx-auto pt-8 pb-10 mb-12 md:mb-16 lg:mb-28">
          <% flash.each do |name, msg| %>
            <%= render AlertComponent.new(style: name, closeable: true) do %>
              <%= flash_message(name, msg) %>
            <% end %>
          <% end %>

          <%= yield %>
        </div>
      </main>
    <% end %>
  </div>
</body>
</html>
